import React from 'react'
import {Text, TouchableOpacity, View} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import musicServer from "../http/musicServer";

const songListStyle = {
  wrap: {
    padding: 10,
    backgroundColor: '#fff',
    marginBottom: 4,
    width: '100%'
  },
  inner: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  name: {
    fontWeight: 'bold',
    fontSize: 14,
    color: '#666',
    width: '100%'
  },
  artist: {
    paddingTop: 6,
    fontSize: 12,
    color: '#999'
  },
  icon: {
    paddingLeft: 10,
    paddingRight: 10
  }
}

export default function SongItem(props) {
  const {song, section, playSong, curSong, likeList, likeSong} = props;
  const artists = song && (song.ar || song.artists);
  return (
    <TouchableOpacity style={songListStyle.wrap} onPress={() => playSong(song, section)}>
      <View style={songListStyle.inner}>
        {curSong && curSong === song && <Icon style={{paddingRight: 10}} name={'caret-right'} size={24} color={'#fa541c'}/>}
        <View>
          <Text style={songListStyle.name}>{song && song.name}</Text>
          {artists && <Text style={songListStyle.artist}>{artists.map(artist => artist.name).join("/")}</Text>}
        </View>
        {section && section.id ?
          <TouchableOpacity style={songListStyle.icon}>
            <Icon style={{paddingRight: 10}} name={'caret-right'} size={24} color={'#fa541c'}/>
          </TouchableOpacity> : <TouchableOpacity style={songListStyle.icon} onPress={() => likeSong(song)}>
            <Icon style={{paddingRight: 10}} name={'anchor'} size={16} color={likeList.includes(song.id) ? '#fa541c' : '#999'}/>
          </TouchableOpacity>
        }
      </View>
    </TouchableOpacity>
  )
}
